<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ext="http://opensource.extjsf.com/jsf" xml:lang="en" lang="en">
	<ui:composition template="/template/global.xhtml">
		<ui:define name="header">
			<style type="text/css">
html,body {
	font: normal 12px verdana;
	margin: 0;
	padding: 0;
	border: 0 none;
	overflow: hidden;
	height: 100%;
}

p {
	margin: 5px;
}

.settings {
	background-image: url(../shared/icons/fam/folder_wrench.png);
}

.nav {
	background-image: url(../shared/icons/fam/folder_go.png);
}
</style>
		</ui:define>
		<ui:define name="body">
			<div id="west">
				<p>
					Hi. I'm the west panel.
				</p>
			</div>
			<div id="north">
				<p>
					north - generally for menus, toolbars and/or advertisements
				</p>
			</div>
			<div id="center2">
				<a id="hideit" href="#">Toggle the west region</a>
				<p>
					My closable attribute is set to false so you can't close me. The
					other center panels can be closed.
				</p>
				<p>
					The center panel automatically grows to fit the remaining space in
					the container that isn't taken up by the border regions.
				</p>
				<hr />
				<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus
					nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut
					nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis
					ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero
					lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In
					pellentesque nisl non sem. Suspendisse nunc sem, pretium eget,
					cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat.
					Nullam vel justo in neque porttitor laoreet. Aenean lacus dui,
					consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est,
					dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam.
					Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor
					magna, ornare sed, elementum porta, luctus in, leo.
				</p>
				<p>
					Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin
					gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit.
					Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in
					tristique turpis dolor sed urna. Donec sit amet quam eget diam
					fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis
					natoque penatibus et magnis dis parturient montes, nascetur
					ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean
					molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus
					dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed
					scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas
					et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh
					sit amet sapien.
				</p>
				<p>
					Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam
					pellentesque enim. Nam tincidunt condimentum nisi. Maecenas
					convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id
					magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam
					vulputate, mauris vitae luctus pharetra, pede neque bibendum
					tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer
					pulvinar nisi. Cras interdum ultricies sem. Nullam tristique.
					Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus
					ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc
					leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit
					purus a nulla. Sed eu diam.
				</p>
				<p>
					Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
					posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam
					at sem dictum ullamcorper. Vestibulum pharetra purus sed pede.
					Aliquam ultrices, nunc in varius mattis, felis justo pretium magna,
					eget laoreet justo eros id eros. Aliquam elementum diam fringilla
					nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien
					condimentum dictum dapibus, lorem augue fringilla orci, ut
					tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et,
					dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat.
					Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien.
					Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et
					ultrices posuere cubilia Curae;
				</p>
				<p>
					Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus
					non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus
					lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in,
					tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis,
					consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula
					elit. Proin quis leo sed tellus scelerisque molestie. Quisque
					luctus. Integer mattis. Donec id augue sed leo aliquam egestas.
					Quisque in sem. Donec dictum enim in dolor. Praesent non erat.
					Nulla ultrices vestibulum quam.
				</p>
				<p>
					Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque
					tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla
					velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus
					faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non,
					porta id, neque. Nulla et felis nec odio mollis vehicula. Donec
					elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac
					nulla. In risus.
				</p>
				<p>
					Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis
					pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec
					libero. Nam vestibulum tempus ipsum. In hac habitasse platea
					dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor
					in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id
					velit ut velit varius commodo. Vestibulum ante ipsum primis in
					faucibus orci luctus et ultrices posuere cubilia Curae; Nulla
					facilisi. Fusce ornare pellentesque libero. Nunc rhoncus.
					Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo
					sem lobortis elit, ac sollicitudin ipsum neque nec ante.
				</p>
				<p>
					Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy
					consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit
					amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit.
					Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
					posuere cubilia Curae; Suspendisse sit amet dui vitae lacus
					fermentum sodales. Donec varius dapibus nisl. Praesent at velit id
					risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit
					non, mattis sit amet, magna. Lorem ipsum dolor sit amet,
					consectetuer adipiscing elit. Pellentesque habitant morbi tristique
					senectus et netus et malesuada fames ac turpis egestas. Etiam
					varius dignissim nibh. Quisque id orci ac ante hendrerit molestie.
					Aliquam malesuada enim non neque.
				</p>
			</div>
			<div id="center1">
				<p>
					<b>Done reading me? Close me by clicking the X in the top right
						corner.</b>
				</p>
				<p>
					Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus
					non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus
					lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in,
					tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis,
					consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula
					elit. Proin quis leo sed tellus scelerisque molestie. Quisque
					luctus. Integer mattis. Donec id augue sed leo aliquam egestas.
					Quisque in sem. Donec dictum enim in dolor. Praesent non erat.
					Nulla ultrices vestibulum quam.
				</p>
				<p>
					Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque
					tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla
					velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus
					faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non,
					porta id, neque. Nulla et felis nec odio mollis vehicula. Donec
					elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac
					nulla. In risus.
				</p>
				<p>
					Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis
					pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec
					libero. Nam vestibulum tempus ipsum. In hac habitasse platea
					dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor
					in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id
					velit ut velit varius commodo. Vestibulum ante ipsum primis in
					faucibus orci luctus et ultrices posuere cubilia Curae; Nulla
					facilisi. Fusce ornare pellentesque libero. Nunc rhoncus.
					Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo
					sem lobortis elit, ac sollicitudin ipsum neque nec ante.
				</p>
				<p>
					Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy
					consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit
					amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit.
					Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
					posuere cubilia Curae; Suspendisse sit amet dui vitae lacus
					fermentum sodales. Donec varius dapibus nisl. Praesent at velit id
					risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit
					non, mattis sit amet, magna. Lorem ipsum dolor sit amet,
					consectetuer adipiscing elit. Pellentesque habitant morbi tristique
					senectus et netus et malesuada fames ac turpis egestas. Etiam
					varius dignissim nibh. Quisque id orci ac ante hendrerit molestie.
					Aliquam malesuada enim non neque.
				</p>
			</div>
			<div id="props-panel"
				style="width: 200px; height: 200px; overflow: hidden;">
			</div>
			<div id="south">
				<p>
					south - generally for informational stuff, also could be for status
					bar
				</p>
			</div>
			<ext:cmp layout="border" xtype="viewport" id="vp">
				<ext:cmp region="north" el="north" height="32" xtype="box" />

				<ext:cmp region="south" contentEl="south" split="true" height="100"
					minSize="100" maxSize="100" collapsible="true" title="South"
					margins="0 0 0 0" />
				<ext:cmp region="east" title="East Side" collapsible="true"
					split="true" width="225" minSize="175" maxSize="400" layout="fit"
					margins="0 5 0 0">
					<ext:cmp border="false" xtype="tabpanel" activeTab="1"
						tabPosition="bottom">
						<ext:cmp html="A TabPanel component can be a region" title="A Tab"
							autoScroll="true" />
						<ext:cmp title="Property Grid" closable="true"
							source__NS="{ '(name)': 'Properties Grid', 'grouping': false,'autoFitColumns': true,'productionQuality': false,'created': new Date(Date.parse('10/15/2006')),'tested': false,'version': .01,'borderWidth': 1}"
							xtype="pgrid" />

					</ext:cmp>
				</ext:cmp>
				<ext:cmp region="west" id="west-panel" title="West" split="true"
					width="200" minSize="175" maxSize="400" collapsible="true"
					margins="0 5 0 0" layout="accordion"
					layoutConfig__NS="{animate:true}">
					<ext:cmp contentEl="west" title="Navigation" border="false"
						iconCls="nav" />
					<ext:cmp html="Some settings in here" title="Settings"
						border="false" iconCls="settings" />
				</ext:cmp>
				<ext:cmp region="center" deferredRender="false" activeTab="0"
					xtype="tabpanel">
					<ext:cmp contentEl="center1" title="Close Me" closable="true"
						autoScroll="true" />
					<ext:cmp contentEl="center2" title="Center Panel" autoScroll="true" />
				</ext:cmp>

			</ext:cmp>
		</ui:define>
	</ui:composition>

</html>
